var mapPanel, tree;

	
Ext.onReady(function() {
    // create a map panel with some layers that we will show in our layer tree
    // below.
	var server_url = "http://localhost:8080/geoserver";
	var server_featuretype = server_url + '/rest/workspaces/GT/featuretypes.xml';
	var layer_arr = new Array();	
	var name_arr =  new Array();
	var i = 0;
	
	$.get(server_featuretype ,function(data){				
				$(data).find('featureType').each(function(){	
					var $layer = $(this);
					name_arr[i]="GT:" + $layer.find('name').text();					
					i++;														
				})
	});	
	
	alert("Welcome to " + server_url);
	//alert(name_arr.length);
	//Them lop nen
	for (var j = 0; j < name_arr.length; j++){
		if(name_arr[j]=="GT:xaphuong_region"){
			layer_arr[0] = new OpenLayers.Layer.WMS(name_arr[j],
										server_url+'/wms', {
										//layers: "GT:xaphuong_region"
										layers:  name_arr[j],
										transparent: true
										}, {          
											isBaseLayer: true,
											visibility: true,					
											buffer: 0,
										}
								);
		}
								
	}
	
	//Them cac lop con lai
	var t = 1;
	for (var j = 0; j < name_arr.length; j++){				
		if(name_arr[j]!="GT:xaphuong_region"){
			layer_arr[t] = new OpenLayers.Layer.WMS(name_arr[j],
										server_url+'/wms', {
										//layers: "GT:xaphuong_region"
										layers:  name_arr[j],
										transparent: true
										}, {          
											isBaseLayer: false,
											visibility: false,					
											buffer: 0,
										}
								);
			t++;
		}
				
	}

	/*			
            new OpenLayers.Layer.WMS("Tram BTS",
                "http://localhost:8080/geoserver/wms", {
                    layers: "GT:tram_bts_font_point",
					transparent: true,
                    format: "image/gif"
                }, {
					isBaseLayer: false,
					buffer: 0,
					visibility: false
                }
            ),
            new OpenLayers.Layer.WMS("Giao thong",
                "http://localhost:8080/geoserver/wms", {
                    layers: "GT:gthong_polyline",
                    transparent: true,
                    format: "image/gif"
                }, {
                    isBaseLayer: false,
					buffer: 0,
					visibility: false
                }
            ),
            new OpenLayers.Layer.WMS("Buu dien",
                "http://localhost:8080/geoserver/wms", {
                    layers: "GT:buudien_font_point",
                    transparent: true,					
                  //  format: "image/gif"
                }, {
                    isBaseLayer: false,					
                    buffer: 0,
					visibility: false
                }
            ),
            new OpenLayers.Layer.WMS("Duong thu",
                "http://localhost:8080/geoserver/wms", {
                    layers: "GT:duong_thu_polyline",
                    transparent: true,					
                   // format: "image/gif"
                }, {
                    isBaseLayer: false,
					buffer: 0,
					visibility: false
                }
            )*/			
        
		
    mapPanel = new GeoExt.MapPanel({
        border: true,
        region: "center",
        // we do not want all overlays, to try the OverlayLayerContainer
       map: new OpenLayers.Map({allOverlays: false}),
       center: [0, 0],
       zoom: 7,
       map:{          
           projection: "EPSG:4326",
           units: "degrees",
		   maxResolution: 0.107578125,
		   maxExtent: [
					105.227535,9.920258,105.845518,10.327515
			]},
			items: [{
				xtype: "gx_zoomslider",
				vertical: true,
				height: 100,
				x: 10,
				y: 20,
				plugins: new GeoExt.ZoomSliderTip()
			}],     						
		    layers: layer_arr
    });


    // create our own layer node UI class, using the TreeNodeUIEventMixin
    var LayerNodeUI = Ext.extend(GeoExt.tree.LayerNodeUI, new GeoExt.tree.TreeNodeUIEventMixin());
        
    // using OpenLayers.Format.JSON to create a nice formatted string of the
    // configuration for editing it in the UI
    var treeConfig = [{
        nodeType: "gx_baselayercontainer"
    }, {
        nodeType: "gx_overlaylayercontainer",
        expanded: true,
        loader: {
            baseAttrs: {
             uiProvider: "layernodeui",
			 checked: false
            }
        }
    }, {     
        loader: {
            param: "LAYERS"
        }
    }];
    // The line below is only needed for this example, because we want to allow
    // interactive modifications of the tree configuration using the
    // "Show/Edit Tree Config" button. Don't use this line in your code.
    treeConfig = new OpenLayers.Format.JSON().write(treeConfig, false);

    // create the tree with the configuration from above
	
    tree = new Ext.tree.TreePanel({
        border: true,
        region: "west",
        title: "Layers",
        width: 200,
        split: true,
        collapsible: true,
        collapseMode: "mini",
        autoScroll: true,
        
        loader: new Ext.tree.TreeLoader({
            // applyLoader has to be set to false to not interfer with loaders
            // of nodes further down the tree hierarchy
            applyLoader: false,
            uiProviders: {
                "layernodeui": LayerNodeUI
            }
        }),
        root: {
            nodeType: "async",
            // the children property of an Ext.tree.AsyncTreeNode is used to
            // provide an initial set of layer nodes. We use the treeConfig
            // from above, that we created with OpenLayers.Format.JSON.write.
            children: Ext.decode(treeConfig)
            // Don't use the line above in your application. Instead, use
            //children: treeConfig
            
        },       
        rootVisible: false,
        lines: false,
        
    });
	
    new Ext.Viewport({
        layout: "fit",
        hideBorders: true,
        items: {
            layout: "border",
            deferredRender: false,
            items: [mapPanel, tree]
        }
    });
	
});